<template>
	<view class="container">
		<swiper class="banner-swiper" circular autoplay :interval="5000" :duration="1000" >
			<swiper-item class="banner-swiper-item" v-for="(item, index) in advertisementHome" :key="index" >
				<!-- #ifdef MP-ALIPAY -->
				<image :src="item.imgUrl" mode="widthFix" @tap="function(){goShopDetail(item)}" style="min-height:320px "></image>
				<!-- #endif -->
				<!-- #ifndef MP-ALIPAY -->
				<image :src="item.imgUrl" mode="widthFix" @tap="function(){goShopDetail(item)}" ></image>
				<!-- #endif -->
			</swiper-item>
		</swiper>
		<view class="content">
			<view @tap="test()">这是一个事件</view>
			<!-- section-1 begin -->
			<view class="section-1">
				<navigator class="item" open-type="switchTab" url="/pages/index/index" hover-class="none">
					<image src="/static/images/home/home_icon_ziqu1.png" mode="widthFix"></image>
					<view class="wenyue-font">门店自取</view>
					<view class="text-color-assist">下单免排队</view>
				</navigator>
        <!--open-type="navigate" url="/pages/addresses/addresses"-->
				<navigator class="item"  hover-class="none" @click="waiMai">
					<image src="/static/images/home/home_icon_waimai1.png" mode="widthFix"></image>
					<view class="wenyue-font">外卖</view>
					<view class="text-color-assist">足不出户更方便</view>
				</navigator>
			</view>
			<!-- section-2 end -->
			<!-- section-2 beginopen-type="switchTab" url="/pages/mart/mart" -->
			<view class="section-2">
				<navigator class="item" @click="$api.noOpen"  hover-class="none">
					<view class="title">
						<image src="/static/images/home/home_icon_baihuo1.png"></image>
						<view>{{brandName}}百货</view>
					</view>
					<view class="tips">灵感商品 立即选购</view>
				</navigator>
        <!---->
				<navigator open-type="navigate" url="/pages/home/group-dinner" class="item"  hover-class="none">
					<view class="title">
						<image src="/static/images/home/home_icon_qiye1.png"></image>
						<view>企业团餐</view>
					</view>
					<view class="tips">10份起送</view>
				</navigator>
			</view>
			<!-- section-2 end   open-type="navigate" url="/pages/integrals/mall"-->
			<view class="section-3">
				<navigator class="my-integral"  hover-class="none">
					<view class="integrals" @click="$api.noOpen">
						<view>我的积分</view>
						<view class="neutra-font">o</view>
					</view>
					<view class="tips" @click="$api.noOpen">
						可兑换{{brandName}}劵和丰富灵感周边
					</view>
				</navigator>
<!--				<navigator class="my-code" open-type="navigate" url="/pages/my/code" hover-class="none">-->
<!--					<image src="/static/images/home/home_icon_erweima.png"></image>-->
<!--					<view>会员码</view>-->
<!--				</navigator>-->
        <navigator class="my-code" hover-class="none" @click="$api.noOpen" >
          <image src="/static/images/home/home_icon_erweima.png"></image>
          <view>会员码</view>
        </navigator>
<!--				<view class="tips" @tap="test()">-->
<!--					click-->
<!--				</view>-->

			</view>
<!--      <view class="ad-view">-->
<!--        <ad unit-id="adunit-c7a46226c8ce1d86" ad-intervals="50"></ad>-->
<!--      </view>-->
		</view>
	<!-- 	    <view class="ad-view">
		      <ad adpid="adunit-04dc09f5c7245e3d" unit-id="" appid="" apid="" type="feed"></ad>
		    </view>-->
<!-- <view class="ad-view">-->
<!--      <ad unit-id="adunit-670a9fb0e823b446" ad-intervals="100"></ad>-->




<!--    </view>-->
    <login-popup ref="loginPopup" ></login-popup>
  </view>
</template>

<script>
import loginPopup from '../my/components/login-popup.vue'
import cartPopup from "../index/components/cart-popup/cart-popup";
	export default {
    components: {
      loginPopup
    },
		async onLoad() {
			//#ifdef MP-WEIXIN
			wx.preloadAd([
			    {
			      unitId: 'adunit-c00bacce4dfbf9f7', // 视频广告广告单元
			      type: 'video' // 视频广告
			    }, {
			      unitId: 'adunit-51a32d77b78f728a', // 视频广告广告单元
			      type: 'video' // 视频广告
			    }
			  ])
			//#endif

      
		},
		data() {
			return {
        brandName : this.$api.brandName,
				advertisementHome:[{}],
						ms: [{
							  id: 1,
							  latitude: 30.3,
							  longitude: 120.2,
							  width: 30,
							  height: 30
						  }],
			}
		},
		mounted() {

		},
		created(){
			/**
			 * 获取最近的店铺
			 */
      this.$api.getBrandInfo()
			this.getAdvert()
      this.$api.ajax({
        url: "/web/app-order/check-auth",
        method: "post",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success:(res) => {
          console.log(res.data);
          const { data } = res;
          if(data.status == 403||data.code==403){
            this.$refs['loginPopup'].open()
          }else{
            //this.$emit('pay')
          }

        }
      });



		},
		methods: {
			goShopDetail (spu){

				console.log(spu)
				uni.reLaunch({
				  url: "/pages/index/index?shopDetail="+encodeURIComponent(JSON.stringify(spu))
				})
			  },
      // async getBrandInfo(){
      //   let flag =  this.$api.customStoreageManage.getStorage("currentBrand")
      //   if(flag ==undefined||flag == null ||flag == '') {
      //     this.$api.ajax({
      //       url: "/web/app-integral/get/" + this.$api.brandId,
      //       method: "get",
      //       header: {
      //         "Content-Type": "application/x-www-form-urlencoded"
      //       },
      //       success: (res) => {
      //         const {data} = res.data || {};
      //         console.log("dddd", data)
      //         this.$api.customStoreageManage.setStorage("currentBrand", data, 60)
      //       }
      //     });
      //   }
      // },
			async getAdvert(){
				let advertisementCache = this.$api.customStoreageManage.getStorage("advertisement:"+this.$api.brandId);
				if(advertisementCache){//如果缓存中有则不进行获取
          let {t1,t4} = advertisementCache
          this.advertisementHome = t4
				  return
				}
				this.$api.ajax({
				  url: "/web/app-integral/index-data?brandId="+this.$api.brandId,
				  method: "get",
				  header: {
					"Content-Type": "application/x-www-form-urlencoded"
				  },
				  success:(res)=> {
					const { data } = res.data || {};
					let {advertisement,salesTop,newTop} = data
					let {t1,t4} = advertisement
					console.log(advertisement);
          this.$api.customStoreageManage.setStorage('advertisement:'+this.$api.brandId, advertisement,5)
					//uni.setStorageSync('advertisement', advertisement)//将轮播缓存
					uni.setStorageSync('salesTop', salesTop)//销售最高的
					this.$api.customStoreageManage.setStorage("salesTop",salesTop,10)
					uni.setStorageSync('newTop', newTop)//新上的产品
					this.advertisementHome = t4

				  }
				});

			  },
			waiMai(){
				uni.showToast({
				  title: "该功暂未开放，敬请期待",
				  icon: 'none',
				  duration: 2000
				});
					console.log("sss")
			  },
			test(){
						console.log(2);
						uni.getLocation({
							type: 'wgs84',
							success: function (res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
							}
						});
					}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		max-height: 100%;
	}

	.banner-swiper {
		width: 100%;
		height: 600rpx;

		.banner-swiper-item {
			image {
				width: 100%;
			}
		}
	}

	.content {
		width: 100%;
		padding: 0 30rpx;
		position: relative;
	}

	.section-1 {
		position: relative;
		background-color: $bg-color-white;
		margin-top: -60rpx;
		border-radius: $border-radius-lg;
		padding: 60rpx 0;
		display: flex;
		margin-bottom: 30rpx;
		box-shadow: $box-shadow;

		.item {
			flex: 1;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			&:nth-child(1):after {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 2rpx;
				background-color: $border-color;
			}

			image {
				width: 100rpx;
				margin-bottom: 20rpx;
			}

			.wenyue-font {
				font-size: 48rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.section-2 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.item {
			width: 335rpx;
			background-color: #EAEBEC;
			padding: $spacing-row-lg 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: $border-radius-lg;

			.title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: $font-size-lg;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
				}
			}

			.tips {
				color: $text-color-assist;
				font-size: $font-size-base;
			}
		}
	}

	.section-3 {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: $font-size-base;
		color: $text-color-assist;
		padding: 0 10rpx;

		.my-integral {
			flex: 1;
			display: flex;
			flex-direction: column;

			.integrals {
				display: flex;
				align-items: center;
				font-size: $font-size-lg;
				color: $text-color-base;
				margin-bottom: 10rpx;

				.neutra-font {
					margin-left: 10rpx;
					font-size: 42rpx;
				}
			}
		}

		.my-code {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 30rpx;
			position: relative;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: $spacing-col-sm;
			}

			&:before {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				border-left: 1rpx solid rgba($color: $border-color, $alpha: 0.6);
			}
		}
	}
</style>
